<template>
  <div style="overflow-x: hidden;">
    <t-space direction="horizontal">
      <t-card v-for="(item,index) in items" :key="item.grade" :class="styles[index]" style="width:230px" @click="select(index)" >
          <t-space direction="vertical">
            <div class="card-item">{{item.text}}</div>
            <div class="card-item">¥{{item.price}}</div>
            <div v-for="d in item.descriptions" class="card-item">{{d}}</div>

          </t-space>
        </t-card>

        <!-- <t-card hoverShadow :class="styles[3]" @click="select(3)">
        <t-space direction="vertical">
          <div>终身VIP</div>
          <div>¥299 / 年</div>
          <div>赠送99积分</div>
          <div>积分5折优惠</div>
          <div>二级分销权限</div>
          <div>奖池分成权益10%</div>

          </t-space>
        </t-card>-->
    </t-space>

     <t-divider>支付信息</t-divider>
    <t-row :gutter="[24, 24]">
      <t-col :flex="1">
        <qrcode-vue :value="qrcodeUrl" :size="200" level="H" />
      </t-col>
      <t-col :flex="3">
        <t-space direction="vertical">
<div class="item"></div>
          <div class="item">商品：<span style="font-size: 22px;">VIP{{gradeTxt}}</span></div>
          <div class="item">价格：<span style=" text-decoration: line-through">￥{{currentPrice.old_price}}元</span></div>
          <div class="item">实付：<span style="color: red;font-size:22px">￥{{currentPrice.price}}元 (限时优惠)</span></div>
          <!-- <div class="item">限时优惠 ：<span style="color:crimson">{{currentPrice.discount}}</span></div> -->
          <div class="item">使用支付宝或微信扫码支付 </div>
        </t-space>
      </t-col>
    </t-row>


  </div>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import QrcodeVue from 'qrcode.vue';
  import {
    useWebsocketStore,
    useUserStore
  } from '@/store'
  import {
    getVipPrice
  } from '@/api/order'
  import $eventBus from '@/utils/eventBus'
import { MessagePlugin } from 'tdesign-vue-next';

  const socketStore = useWebsocketStore()
  const userStore = useUserStore()
  const styles=ref([])
  const items = ref([]);

  const integral = ref(10);
  const qrcodeUrl = ref('')
  //vip等级 3周卡 1月卡 2年卡 5终身
  const grade=ref(3)
  const gradeTxt=ref('周卡')

  const currentPrice = ref({})

  const priceInfo = ref([])
  const fetchData = () => {
    getVipPrice().then(ret => {
       console.log(JSON.stringify(ret))
       if(ret)
       {
         items.value=ret
         currentPrice.value.old_price=ret[0].old_price
         currentPrice.value.price=ret[0].salePrice
       }
    })
  }
const select=(e)=>{
  styles.value=['','','','']
  styles.value[e]='t-card--shadow'
  currentPrice.value.old_price=items.value[e].old_price
  currentPrice.value.price=items.value[e].salePrice
   //vip等级 3周卡 1月卡 2年卡 5终身
  if(e==0)
  {
    grade.value=3,
    gradeTxt.value='周卡'
  }
  if(e==1)
  {
    grade.value=1,
    gradeTxt.value='月卡'
  }
  if(e==2)
  {
    grade.value=2,
    gradeTxt.value='年卡'
  }
  if(e==3)
  {
    grade.value=5,
    gradeTxt.value='终身VIP'
  }

  qrcodeUrl.value =
    `https://api.pan.rs888.net/create/vip?userId=${userStore.userInfo.user_id}&grade=${grade.value}&wsId=${socketStore.websocketId}`
}



styles.value=['t-card--shadow','','','']
qrcodeUrl.value =
      `https://api.pan.rs888.net/create/vip?userId=${userStore.userInfo.user_id}&grade=${grade.value}&wsId=${socketStore.websocketId}`
  $eventBus.on('receiveMsgEvent',(data)=>{
    let d=JSON.parse(data)
    if(d.Type==='pay.success')
    {
        $eventBus.emit('paySuccess')
        MessagePlugin.success('成功购入vip')
    }
  })
 // fetchData()
</script>

<style scoped>
  .card-item{
    font-size: 15px;
    font-weight: 400;
  }
  .item {
    font-size: 18px;
  }

</style>
